<template>
  <div class="pass-main">
    <div class="pass-title">
      <el-steps :active="step" simple finish-status="success">
        <el-step title="验证身份" />
        <el-step title="设置密码" />
        <el-step title="改密成功" />
      </el-steps>
    </div>

    <div class="pass-contaner">
      <div v-show="step === 1" class="step-1">
        <el-input v-model="mail" disabled style="width: 350px; height: 40px">
          <template #prepend>用户邮箱</template>
        </el-input>

        <div>
          <el-input
            v-model="code"
            placeholder="请输入验证码"
            style="width: 220px; height: 40px"
          />
          <span v-show="!sendIng">
            <el-button
              type="primary"
              style="width: 100px; height: 40px; margin-left: 30px"
              @click="send"
              >发送验证码</el-button
            >
          </span>
          <span v-show="sendIng">
            <el-button
              style="width: 100px; height: 40px; margin-left: 30px"
              disabled
              >{{ leftSecond }}</el-button
            >
          </span>
        </div>
        <div class="text">{{ codeMessage }}</div>
        <div>
          <el-button
            type="primary"
            style="width: 350px; height: 40px"
            @click="subStepOne"
            >下一步</el-button
          >
        </div>
      </div>

      <div v-show="step === 2" class="step-2">
        <div>
          <el-input
            v-model="newPassword"
            type="password"
            style="width: 350px; height: 40px"
            show-password
          >
            <template #prepend>新的密码</template>
          </el-input>
        </div>
        <div>
          <el-input
            v-model="checkPassword"
            type="password"
            style="width: 350px; height: 40px"
            show-password
          >
            <template #prepend>确认密码</template>
          </el-input>
        </div>
        <div class="text">{{ passwordMessage }}</div>
        <div>
          <el-button
            type="primary"
            style="width: 350px; height: 40px"
            @click="subStepTwo"
            >下一步</el-button
          >
        </div>
      </div>

      <div v-show="step === 3" class="step-3">
        <div>密码修改成功！！！</div>
      </div>
    </div>
  </div>
</template>

<script>
import UserApi from '@/api/core/User'
import Cookie from 'js-cookie'
export default {
  name: 'UserPassWord',

  data() {
    return {
      step: 1,

      code: '',
      sendIng: false,
      second: 60,
      leftSecond: 10,
      mail: '',
      codeMessage: '',

      newPassword: '',
      checkPassword: '',
      passwordMessage: '',
    }
  },

  created() {
    this.mail = Cookie.get('mail')
  },

  methods: {
    send() {
      if (this.sendIng === true) return
      this.sendIng = true
      this.timeDown()

      UserApi.sendCode(this.mail)
        .then((response) => {
          this.$message.success(response.message)
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },
    //验证码倒计时
    timeDown() {
      this.leftSecond = this.second
      const timmer = setInterval(() => {
        this.leftSecond--
        if (this.leftSecond <= 0) {
          clearInterval(timmer)
          this.leftSecond = this.second
          this.sendIng = false
        }
      }, 1000)
    },

    subStepOne() {
      if (this.code === null || this.code === '') {
        this.codeMessage = '请输入验证码'
        return
      }

      UserApi.checkCode(this.code)
        .then(() => {
          this.step = 2
        })
        .catch((error) => {
          if (error.code === 205) {
            this.codeMessage = '验证码错误'
          }
          if (error.code === 500) {
            this.codeMessage = error.message
          }
        })
    },

    subStepTwo() {
      if (this.newPassword !== this.checkPassword) {
        this.passwordMessage = '密码不一致'
        return
      }

      const isNull =
        this.newPassword === null ||
        this.newPassword === '' ||
        this.checkPassword === null ||
        this.checkPassword === ''

      if (isNull) {
        this.passwordMessage = '密码不能为空'
        return
      }

      const notLength =
        this.newPassword.length > 15 || this.newPassword.length < 6
      if (notLength) {
        this.passwordMessage = '密码长度要在6~15之间'
        return
      }

      UserApi.updateUserPassWord(this.code, this.newPassword)
        .then(() => {
          this.step = 3
        })
        .catch((error) => {
          this.$message.error(error.message)
        })
    },
  },
}
</script>

<style>
.pass-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pass-title {
  width: 500px;
}

.pass-contaner {
  margin-top: 60px;
  display: flex;
}
.pass-contaner .step-1 {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.pass-contaner .step-1 .text,
.pass-contaner .step-2 .text {
  color: red;
  height: 4px;
  margin-top: -16px;
  margin-bottom: -8px;
  font-size: 13px;
}
.pass-contaner .step-2 {
  display: flex;
  flex-direction: column;
  height: 180px;
  justify-content: space-between;
}
.step-3 {
  color: #e5994b;
  font-size: 30px;
}
</style>
